<script>
import {mapMutations} from "vuex";

export default {
    name: "AddGoods",
    // methods:mutations actions
    // computed: state getters
    methods:{
        // ...mapMutations("goods",["ADD_GOODS"]),
        ...mapMutations("goods",{
            addGoods:"ADD_GOODS"
        }),
        submitHandler(){
            const goodsName = this.$refs.goodsName.value.trim();
            const goodsPrice = this.$refs.goodsPrice.value.trim();
            if(goodsName.length>0 && goodsPrice.length>0){
                // 模块名/mutation的名字
                this.$store.commit("goods/ADD_GOODS",{
                    goodsName,
                    goodsPrice:goodsPrice/1,
                    success:()=>{
                        this.$router.push("/goodsList");
                    }
                });

                // 简写：
                // this.ADD_GOODS({
                //     goodsName,
                //     goodsPrice:goodsPrice/1,
                //     success:()=>{
                //         this.$router.push("/goodsList");
                //     }
                // });

                // this.addGoods({
                //     goodsName,
                //     goodsPrice:goodsPrice/1,
                //     success:()=>{
                //         this.$router.push("/goodsList");
                //     }
                // });

            }else{
                alert("请输入商品名称或价格");
            }

        }
    },
    mounted() {
        console.log("addGoods->mounted");
    },
    destroyed() {
        console.log("addGoods->destroyed");
    },
    activated() {
        // 首次加载时执行：mounted之后
        // 再次进入到缓存组件时执行。
        console.log("addGoods-activated");
    },
    deactivated() {
        // 离开后执行
        console.log("addGoods-deactivated");
    }
}
</script>

<template>
    <form>
        <p>商品名称：<input ref="goodsName" type="text"></p>
        <p>商品价格：<input ref="goodsPrice" type="text"></p>
        <button @click.prevent="submitHandler">提交</button>
    </form>
</template>

<style scoped>

</style>